<template>
	<view class="page-booking-result">
		<basic-nav-bar 
			backgroundColor="#F6F9FD"
			:statusBar="true"
			:border="false" 
			:fixed="true"
			left-icon="arrowleft" 
			title="预订结果" 
			@clickLeft="goBack" 
		/>
		<view class="page-booking-result-content" v-if="result">
			<view class="result-status">
				<image class="image" :src="result.status ? success : fail" />
				<view class="status">
					{{result.status ? '支付成功！':'支付失败！'}}
				</view>
				<view class="pending">
					订单确认中…				
				</view>				
			</view>
			<view class="result-detail">
				<view class="name">
					{{result.name}}
				</view>	
				<view class="desc">
					<basic-label-value label="预订日期" :value="result.createdAt" />
					<basic-label-value label="出行日期" :value="result.checkinTime" />
					<basic-label-value label="套餐类型" :value="result.packageName" />
					<basic-label-value :label="result.desc" notColon />									
				</view>	
				<view class="bottom-bar">
					<view class="">
						<basic-label-value label="订单金额">
								<basic-price :price="result.price" unitSize="24rpx" size="36rpx" weight="600" />
						</basic-label-value>
					</view>
					<!-- <basic-label-value label="支付方式" :value="PAY_TYPE[result.payType]" /> -->
				</view>		
			</view>	
			<view class="detail-btn" @click="goDetail">
				查看订单详情				
			</view>
			<view @click="goHome" class="go-back"> 
				返回首页				
			</view>		
		</view>
	</view>
</template>
<script>
import sdk from 'sdk'
import { PAY_TYPE } from '@/model/enum'
import {decodeQueryObject} from 'utils/helper/query'
import { isPaySuccess, getOrderDetail } from 'api'

export default {
	name: '',
	data(){
		return{			
			success: 'https://imgs.bestwehotel.com/images/inn/1btC0wZ1Gc',
			fail: 'https://imgs.bestwehotel.com/images/inn/1btC0vkBwv',
			PAY_TYPE,
			result:null,
			orderNo: null,
			options: null,
			setTimeoutParams: null
		}
	},
	onLoad(query) {
		this.options = decodeQueryObject(query)
		const { orderNo, mToken } = this.options
		if(mToken) store.commit('SAVE_TOKEN', { token: mToken })		
		orderNo && (this.orderNo = orderNo)
		this.getDetail()
	},
	methods: {
		getDetail() {
			getOrderDetail({ orderNo: this.orderNo }).then(res => {
				// this.orderInfo = res.result	
				let desc = ''
				res.result.subOrders.map((item, index)=>{
					desc += item.skuName + 'x' + item.productNum + ((index+1) === res.result.subOrders.length ? `` : `, `)
				})
				this.result = {
					status: this.options.status == 1,//res.result.orderStatus,
					name: res.result.productName,
					price: res.result.payableAmount,
					createdAt: res.result.createdAt,
					checkinTime: res.result.checkinTime,
					packageName: res.result.packageName,
					desc: desc,
					// payType: 1
				}
				// this.isPaySuccess()
				this.setTimeoutParams = setTimeout(()=>{this.goDetail()},10000)
			})
		},
		clearTime(){
			clearTimeout(this.setTimeoutParams)
		},
		goBack() {
			this.clearTime()
		    sdk.navigateBack()      
		},
		goHome(){
			console.log('goHome:::')
			this.clearTime()
			// #ifdef MP
			sdk.switchTab({
				url:'/pages/index/index'
			})			
			// #endif

			// #ifdef H5
			sdk.navigateTo({
				url:'/pages/index/index'
			})
			// #endif
		},
		goDetail(){
			this.clearTime()
			
			sdk.navigateTo({
				url:'/packageOrder/pages/detail/index?orderNo=' + this.orderNo
			})
		}
	}
}
</script>
<style lang="less">
.page-booking-result{
	height: 100vh;
	width: 100%;
	background: #F6F9FD;
	.page-booking-result-content{
		padding: 10rpx @page_horizonal_margin;
		display: flex;
		align-items: center;
		flex-direction: column;
		.result-status{
			width: 100%;
			height: 400rpx;
			.flex-normal-center;
			flex-direction: column;
			.image{
				width:196rpx;
				height:196rpx;
			}
			.status{
				font-size: 32rpx;
				color: #1B2431;
				font-weight: 600;
				line-height: 60rpx;
			}
			.pending{
				font-size: 24rpx;
				color: #8D98AF;
			}
		}
		.result-detail{
			width:706rpx;
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx 40rpx 0;
			box-sizing: border-box;
			.name{
				font-size: 28rpx;
				color: #1B2431;
				font-weight: 600;
				line-height: 60rpx;
			}
			.bottom-bar{
				height:100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1px solid #FAFAFA;
				margin-top: 24rpx;
			}
		}
		.detail-btn{
			width: 476rpx;
			height: 88rpx;
			background: #00CBD6;
			color: #fff;
			font-size: 28rpx;
			border-radius: 44rpx;
			.flex-normal-center;
			margin-top:40rpx;
		}
		.go-back{
			margin-top:30rpx;
			color: #8A95AC;
			font-size: 24rpx;
		}
	}
}
</style>